<template>
  <div>
    <cus-search>
      <cus-search-item>
        <Form :model="searchForm" :label-width="80">
          <FormItem label="消毒状态" class="mr_48 mb_20">
            <Select v-model="searchForm.state" style="width: 160px" placeholder="请选择消毒状态" clearable>
              <Option :value="-1" label="待开始"></Option>
              <Option :value="0" label="进行中"></Option>
              <Option :value="1" label="已完成"></Option>
            </Select>
          </FormItem>

          <FormItem label="消毒模式" class="mr_48 mb_20">
            <Select v-model="searchForm.patternId" style="width: 160px" placeholder="请选择消毒模式" clearable>
              <Option :value="v.id" :label="v.name" v-for="(v, i) in disinfectModeDown" :key="i"></Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间" class="mr_48 mb_20">
            <cus-cascadeDate :startTime.sync="searchForm.startTime" :endTime.sync="searchForm.endTime"
              :showWeekNum="false" :need-init="false" :only-month="false" type="datetime"
              :dateWidth="320"></cus-cascadeDate>
            <!-- <cus-cascadeDate :startTime.sync="searchForm.startTime" :showWeekNum="false"
                            :endTime.sync="searchForm.endTime" :need-init="false" :only-month="false" type="datetime"
                            format="yyyy-MM-dd" :dateWidth="200"></cus-cascadeDate> -->
          </FormItem>
          <FormItem label="伙食单位" class="mr_48 mb_20">
            <Select style="width: 200px" v-model="searchForm.unitCode" @on-change="changeUnitCode">
              <Option v-for="item in unitList" :key="item.id" :value="item.unitCode">{{ item.unitName }}
              </Option>
            </Select>
          </FormItem>
          <cusButton size="small" class="mr_10 mb_20" type="primary" @onClick="pageOption.page = 1; onInit();">
            查询</cusButton>
          <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onReset">重置</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>

    <div class="bottomPanel">
      <cus-card title="消毒台账列表">
      <cus-table :border="true" :loading="searchForm.loading" :columns="columns" :data="data"
        :size="vuex_config.tableSize" :bottomClass="['cus-page']">
        <template slot-scope="{row}" slot="disinfectTime">
          {{ row.disinfectTime ? `${row.disinfectTime.toFixed(2)}(min)` : '' }}
        </template>
        <template slot-scope="{row}" slot="gmtPlan">
          {{ row.gmtPlan | formatTime('yyyy-MM-dd hh:mm:ss') }}
        </template>
        <template slot-scope="{row}" slot="gmtEnd">
          {{ row.gmtEnd | formatTime('yyyy-MM-dd hh:mm:ss') }}
        </template>

        <template slot-scope="{row}" slot="gmtStart">
          {{ row.gmtStart | formatTime('yyyy-MM-dd hh:mm:ss') }}
        </template>
        <template slot-scope="{row}" slot="state">
          <tag color="error" v-if="row.state === -1">待开始</tag>
          <tag color="primary" v-if="row.state === 0">进行中</tag>
          <tag color="success" v-if="row.state === 1">已完成</tag>
        </template>
      </cus-table>
      <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page class="mt_20" :data="pageOption" @pageChange="onInit"></cus-page>
      </div>
    </cus-card>
    <!-- <cus-footer :showWaterMark="false">
      <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
        <cus-page :data="pageOption" @pageChange="onInit"></cus-page>
      </div>
    </cus-footer> -->
    </div>
  </div>
</template>

<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { getDisinfectAccount, getDisinfectModeList, } from '@/api/organ/business'
export default {
  name: 'disinfectAccount',
  data() {
    return {
      searchForm: {
        state: '',
        patternId: '',
        loading: false,
        startTime: '',
        endTime: '',
        unitCode: '',
      },
      unitList: [],
      data: [],
      columns: [
        {
          title: '序号',
          width: 70,
          key: 'name',
          type: 'index',
          align: 'center'
        },
        {
          title: '操作人',
          minWidth: 120,
          key: 'userName',
          align: 'center'
        },
        {
          title: '消毒模式',
          minWidth: 120,
          key: 'patternName',
          align: 'center'
        },
        {
          title: '消毒时间',
          minWidth: 120,
          slot: 'disinfectTime',
          align: 'center'
        },
        {
          title: '状态',
          minWidth: 120,
          slot: 'state',
          align: 'center'
        },
        {
          title: '开始时间',
          minWidth: 180,
          slot: 'gmtStart',
          align: 'center'
        },
        {
          title: '计划完成时间',
          minWidth: 180,
          slot: 'gmtPlan',
          align: 'center'
        },
        {
          title: '结束时间',
          minWidth: 180,
          slot: 'gmtEnd',
          align: 'center'
        },
      ],
      pageOption: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      disinfectModeDown: []
    }
  },
  mounted() {
    this.getSubCanteenList();
  },
  methods: {
    changeUnitCode(e) {
      this.searchForm.unitCode = e;
      console.log(e);
      this.getDisinfectModeListApi();
    },
    onInit() {
      this.getDisinfectAccountApi()
    },
    // 重置查询条件·
    onReset() {
      this.resetFilterForm();
      this.onInit();
    },
    resetFilterForm() {
      this.searchForm.startTime = '';
      this.searchForm.endTime = '';
      this.searchForm.state = '';
      this.searchForm.patternId = '';
      this.searchForm.unitCode = this.unitList[0].unitCode;
      this.pageOption.page = 1;
    },
    getSubCanteenList() {
      getSubCanteenList().then((res) => {
        if (res.code == 1) {
          this.unitList = res.data.list;
          this.searchForm.unitCode = res.data.list[0].unitCode;
          this.getDisinfectModeListApi();
          this.onInit();
        }
      });
    },
    getDisinfectModeListApi() {
      getDisinfectModeList({ org: this.searchForm.unitCode, }).then((res) => {
        if (res.code == 1) {
          this.disinfectModeDown = res.result;
        }
      })
    },
    getDisinfectAccountApi() {
      this.searchForm.loading = true;
      console.log(this.pageOption);
      getDisinfectAccount({
        currentPage: this.pageOption.page,
        pageSize: this.pageOption.pageSize,
        org: this.searchForm.unitCode,
        state: this.searchForm.state,
        patternId: this.searchForm.patternId,
        startTimeQuery: this.searchForm.startTime,
        endTimeQuery: this.searchForm.endTime,
      }).then(res => {
        if (res.code === 1) {
          this.searchForm.loading = false;
          this.data = res.result.list;
          this.pageOption.pageTotal = res.result.total;
        } else {
          this.searchForm.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.bottomPanel {
    background-color: #fff;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    margin-top: 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
</style>
